<template>
  <main class="wss-container">
    <div class="label-box-content">
      <el-row :gutter="20" type="flex">
        <el-col :span="10" class="contractTmp-Box">
          <NewCard title="合同模板" :isright="isright">
            <template slot="right">
              <div class="topRight">
                <el-input
                  v-model="topSearchValue"
                  placeholder="请输入合同名称"
                  class="topSearch"
                  @input="changeValue"
                  @focus="focusInput"
                  @blur="blurInput"
                  ref="topSearch"
                >
                  <i slot="suffix">
                    <svg-icon icon-class="ss_icon" />
                  </i>
                </el-input>
                <div class="topSearchFind" v-show="searchFindShow">
                  <ul>
                    <li
                      v-for="(list, index) in allList"
                      :key="list.id"
                      @mousedown.prevent="clickSearchList(list, index)"
                    >
                      {{ list.name }}
                    </li>
                  </ul>
                </div>
              </div>

              <svg-icon
                icon-class="fx_icon"
                class="shareBtn"
                @click="isShowCard = true"
              />
              <ShareBox
                :thisContentUrl="thisContentUrl"
                :isShowCard.sync="isShowCard"
              ></ShareBox>
            </template>
            <!-- <div class="tabOne">
              <div
                class="tablist"
                :class="this.routeractiv == 1 ? 'isActive' : ''"
                @click="status = 1"
              >
                <img src="~@/assets/images/htmb_icon_nor.png" class="imgnor" />
                <img src="~@/assets/images/htmb_icon_sel.png" class="imgsel" />
                <el-button round>合同模板</el-button>
              </div>
              <div class="tablist" :class="status==2?'isActive':''" @click="status=2">
               <img src="~@/assets/images/fa_icon_nor.png" class="imgnor" />
                  <img src="~@/assets/images/fa_icon_sel.png" class="imgsel" />
                  <el-button round>合同智审</el-button>
              </div>
              <div
                class="tablist"
                :class="this.routeractiv == 2 ? 'isActive' : ''"
                @click="status = 3"
              >
                <img
                  src="~@/assets/images/htzx_icon_nor.png"
                  @click="anser"
                  class="imgnor"
                />
                <img src="~@/assets/images/htzx_icon_sel.png" class="imgsel" />
                <el-button round @click="anser">合同咨询</el-button>
              </div>
            </div> -->

            <!-- 一级类别 -->
            <div class="tabTwo pd30">
              <p class="tabTitle">一级类别</p>
              <ul>
                <li
                  v-for="(s, index) in showlist"
                  :key="s.id"
                  :class="[s.id === firstId ? 'isSecon' : '']"
                  @click="clickFirst(s, index)"
                >
                  <img :src="s.icon" alt="" />
                  <p>{{ s.name }}</p>
                </li>
              </ul>
              <el-button
                size="mini"
                class="label_more"
                v-if="showlist.length > 9"
                @click="labelMore"
                >{{ flagMore ? "更多" : "收起"
                }}<i
                  :class="
                    flagMore == true
                      ? 'el-icon-caret-bottom'
                      : 'el-icon-caret-top'
                  "
                ></i
              ></el-button>
            </div>

            <!-- 二级类别 -->
            <template v-if="secondary.length">
              <div class="tabTitle">
                <div class="secend">
                  <p class="">二级类型</p>
                  <ul>
                    <li
                      v-for="s in secondary"
                      :key="s.id"
                      :class="[s.id === secondaryId ? 'isSecon' : '']"
                      @click="clickSecon(s)"
                    >
                      <img :src="s.icon1" alt="" />
                      <p>{{ s.name }}</p>
                    </li>
                  </ul>
                </div>
                <!-- <el-button
                  size="mini"
                  class="label_more"
                  v-if="secondary.length > 5"
                  >更多<i class="el-icon-caret-bottom"></i
                ></el-button> -->
                <el-button
                  size="mini"
                  class="label_more"
                  v-if="secondary.length > 7"
                  @click="secedMore"
                  >{{ secendMore ? "更多" : "收起"
                  }}<i
                    :class="
                      secendMore == true
                        ? 'el-icon-caret-bottom'
                        : 'el-icon-caret-top'
                    "
                  ></i
                ></el-button>
              </div>
              <!-- 三级类别 -->
              <div class="secondLevel">
                <!-- <p class="tabTitle">三级类型</p> -->
                <ul>
                  <li
                    v-for="(t, index) in contractList"
                    :key="t.id"
                    @click="clickThree(t, index)"
                    :class="{ tagActive: currentIndex == t.id }"
                  >
                    <h2>{{ t.name }}</h2>
                    <!-- <i class="firstWord">{{ getHanzi(t.name) }}</i> -->
                    <!-- <p class="coll_des" v-html="t.info && t.info[0]"></p> -->
                    <p class="coll_source">
                      {{ t.from }} ·
                      {{ t.createTime ? t.createTime.substring(0, 10) : "" }}
                    </p>
                  </li>
                </ul>
              </div>
            </template>

            <!-- gif图片展示 -->
            <!-- <div class="slogan" v-else>
              <div class="gif">
                <img
                  src="https://wensanshi.oss-cn-shenzhen.aliyuncs.com/images/static/20220909-115231.gif"
                  alt=""
                />
              </div>
              <div class="text">
                <div class="cn">
                  善事先利器
                </div>
                <div class="en">
                  good advance weapon
                </div>
              </div>
            </div>
            <!-- gif图片展示 end-->
          </NewCard>
        </el-col>
        <el-col :span="14">
          <div class="contractTemplate" v-if="demandShow == 1">
            <ContractTemplate
              @tofather="tofather"
              :demandShow="demandShow"
              :contractListinfo="contractListinfo"
              :ispurchase="ispurchase"
            ></ContractTemplate>
          </div>
          <div class="featuredContent" v-if="demandShow == 0">
            <FeaturedContent></FeaturedContent>
          </div>
          <div class="pay" v-if="demandShow == 3">
            <Pay
              :currentDetail="currActive"
              @completePay="completePayFn"
              :isEmailOrDown="isEmailOrDown"
              :goodsList="goodsList"
            ></Pay>
          </div>
          <!-- 合同模板详情里的购买 -->
          <div class="pay" v-show="demandShow == 4">
            <Directpay @completePay="completePayFn"></Directpay>
          </div>
        </el-col>
      </el-row>
    </div>
  </main>
</template>

<script>
import Pay from "./Pay.vue";
import Directpay from "./directpay.vue";

import ContractTemplate from "./contractTemplate.vue";
import NewCard from "@/wss/components/newCard.vue";
import FeaturedContent from "@/components/FeaturedContent/index.vue";
// 分享的组件
import ShareBox from "@/components/shareBox/index.vue";

import {
  getContractTypeListApi,
  getscontractListApi,
  getscontractListinfo,
  getscontractifPurchase,
  selectContractBySearchApi,
} from "../../../api/contract/index";
export default {
  name: "ContractConsult",
  components: {
    NewCard,
    Pay,
    ContractTemplate,
    FeaturedContent,
    Directpay,
    ShareBox,
  },
  data() {
    return {
      isShowCard: false, //分享按钮的显示隐藏
      thisContentUrl: "", //分享的链接

      pageing: { pageNum: 1, pageSize: 100 },
      isright: true, //显示搜索框
      allList: [], // 用于过滤的全部类型数据
      filterList: [], // 过滤出来的数据
      topSearchValue: "", //搜索框输入的值
      searchFindShow: false, //搜索发现显示隐藏

      status: 1, //默认选择第一项
      list: [], //所有类别的数据
      firstList: [], //一级类别的列表
      fistindex: 0, //一级类别的当前索引
      firstId: "", //当前选中的一级Id
      firstName: "", //当前选中的一级名称

      secondary: [], //二级类别的列表
      secondaryId: "", //当前选中的二级类型id
      secondaryName: "", //当前选中的二级名称

      threeList: [], //三级类别的列表
      threeId: "", //当前选中的三级类型id
      threeName: "", //当前选中的三级名称
      currentIndex: "",

      demandShow: 0, //是否显示合同模板(是否显示支付界面)
      secondaryId: "1", //当前选中的二级类型id
      // 对应的合同列表
      contractList: [],
      // 所有的合同列表
      allcontractList: [],
      routeractiv: "",
      flagMore: true, //更多
      secendMore: true,
      contractListinfo: [], //对应合同ID查询内容
      //购买参数
      payinfo: {},
      goodsList: {},
      currActive: {},
      showlist: [],
      isEmailOrDown: false, // 是否点击的是true电邮还是false下载文档
      ispurchase: true, //是否已经购买
    };
  },
  async mounted() {
    this.getShareLink(); // 获取当前项目的分享链接

    // await this.getallscontractListfn();

    // await this.getContractTypeListApifn();
    // setTimeout(() => {
    //   this.selectDefault(); //默认选中的一级
    // }, 1000);

    this.routeractiv = this.$route.meta.id;

    this.$bus.$on("handlerShow", (e) => {
      this.demandShow = e;
    });

    this.$bus.$on("EventPaymentCompletion", () => {
      this.demandShow = 0;
    });

    //通过$bus 子组件修改当前显示的
    this.$bus.$on(
      "featHandlerShow",
      (num, detail, goodsList, isEmailOrDown) => {
        this.demandShow = num;
        this.currActive = detail;
        this.goodsList = goodsList;
        this.isEmailOrDown = isEmailOrDown;
        console.log("123");
      }
    );

    this.$bus.$on("showFeatured", (e) => {
      this.demandShow = 0;
    });
  },

  async created() {
    //  this.getallscontractListfn();
    await this.getContractTypeListApifn();
    await this.selectDefault(); //默认选中的一级
  },

  methods: {
    // 获取当前项目的分享链接
    getShareLink() {
      let href = window.location.host; //获取当前域名 不带http://
      let route = this.$route.fullPath;
      this.thisContentUrl = `http://${href}${route}`;
    },

    // 支付成功后的回调
    completePayFn() {
      // 改变购买状态
      // this.$set(this.contractListinfo, "purchase", true);
      this.ispurchase = true;
      this.demandShow = 1;
      this.getscontractListinfofn(this.contractListinfo.id);
    },
    anser() {
      this.$router.push({
        path: "/Bm-Consult/finance",
        query: { queryData: 2 },
      });
    },
    //获取合同类型列表
    async getContractTypeListApifn() {
      // const { pageNum, pageSize } = this.pageing;
      let result = await getContractTypeListApi();
      if (result.code == 200) {
        this.list = result.rows;
        this.showlist = this.list.slice(0, 10);
        this.firstId = result.rows[0].id;
        this.firstName = result.rows[0].name;
        // 用于过滤-----------------------
        // 获取全部一级类型
        // let oneType = [];
        // this.list.forEach((item) => {
        //   oneType.push(item);
        // });
        // // 获取全部二级类型
        // let secondType = [];
        // this.list.forEach((item) => {
        //   if (item.children) {
        //     item.children.forEach((k) => {
        //       secondType.push(k);
        //     });
        //   }
        // });
        // let threeType = this.allcontractList; //全部三级类型
        // this.allList = [...oneType, ...secondType,...threeType];
        // this.filterList = this.allList;
        // console.log(this.allList, "333");
      }
    },
    //搜索框激活状态
    focusInput() {
      //显示搜索发现
      this.searchFindShow = true;
      //获取所有的合同名称
    },
    //搜索框失去焦点
    blurInput() {
      //隐藏搜索发现
      this.searchFindShow = false;
    },
    //输入框改变的时候过滤
    changeValue(value) {
      if (value) {
        this.selectContractBySearchApi(value);
      }
      //过滤数据 this.topSearchValue
      // this.allList = this.filterList.filter((item) =>
      //   item.name.includes(this.topSearchValue)
      // );
    },
    // 合同搜索
    async selectContractBySearchApi(val) {
      let { code, data } = await selectContractBySearchApi({ text: val });
      if (code == 200) {
        this.allList = data;
      }
    },
    //  //点击搜索发现的某一条
    async clickSearchList(list, index) {
      if (list.type == "1") {
        let { rows } = await getContractTypeListApi({ pid: list.id });
        let secondary = rows.length && rows[0];
        this.clickFirst(secondary, index);
      } else if (list.type == "2") {
        this.firstId = list.pid; //获取一级id
        // // 根据一级id过滤当前一级下的二级
        this.secondary = this.list.find((item) => {
          return item.id == list.pid;
        }).children;
        // // 如果当前选中的二级类型不在当前页面，那就跳转到对应的页面，拼接typeId=二级类型id和三级类型id
        this.clickSecon(list, index);
      } else {
        this.clickThree(list, index);
      }
    },
    //获取对应的合同名称
    async getscontractListApifn(id) {
      const { pageNum, pageSize } = this.pageing;
      let { data, code } = await getscontractListApi({
        pageNum,
        pageSize,
        contractTypeId: id,
      });
      if (code == 200) {
        this.contractList = data.rows;
        console.log(this.contractList, "contractList");
      }
    },
    //获取所有的合同名称
    async getallscontractListfn() {
      let { data, code } = await getscontractListApi();
      if (code == 200) {
        this.allcontractList = data.rows;
      }
    },
    //查询是否购买
    async getscontractifPurchasefn(item,e) {
      let params = {
        esId: item.id,
        type: "4",
        // title: item.name,
      };
      // 如果只是打开合同详情，并没有购买
      if(e){
          params.queryPurchase='1'
      }
      let data = await getscontractifPurchase(params);
      if (data.code == 200) {
        //如果只是点击三级标题查看详情
        if(e){
            if (data.ifPurchase == true) {
            this.demandShow = 1;
            this.getscontractListinfofn(item.id);
            // 合同已經购买
            this.ispurchase = data.ifPurchase;
            console.log(this.ispurchase, "this.ispurchase");

            this.payinfo = data;
            this.goodsList = data;
            // 没有购买
            } else {
            this.demandShow = 1;
            this.payinfo = data;
            this.goodsList = data;
            // 合同未购买
            this.ispurchase = data.ifPurchase;
           
            this.getscontractListinfofn(item.id);
            }

        }else{
          // 如果点击的是购买
           // 将数据传给支付'directpay'页面
            this.$bus.$emit("payinfo", data, this.firstName, this.secondaryName);
        }

      }
    },
    //获取对应的类型的详情内容
    async getscontractListinfofn(id) {
      let { data, code } = await getscontractListinfo({ id });
      console.log('获取对应的类型的详情内容data:', data)
      if (code == 200) {
        this.contractListinfo = data;
        this.firstId = data.contractType.parentId;
        this.secondaryId = data.contractType.id;

        this.secondary = this.list.find((item) => {
          return item.id == data.contractType.parentId;
        }).children;
        console.log(this.secondary, "secondarysecondary");
        this.getscontractListApifn(data.contractType.id);
      }
    },
    //默认选中一级类别
    selectDefault() {
      //过滤出二级类别
      this.secondary = this.list[0].children.slice(0, 8);
      // this.secondary = this.list[0].children;
      this.secondaryId = this.secondary[0].id;
      this.getscontractListApifn(this.secondaryId);
      //过滤出三级类别
      // this.threeList = this.secondary.filter(
      //   (item) => item.id == this.secondaryId
      // )[0].children;
      // this.secondaryName = this.secondary[0].name;
      // this.threeName = this.threeList[0].name;

      // 清空二级，为了显示gif
      // this.secondary = [];
    },
    //点击一级类别
    clickFirst(f1, index) {
      console.log(f1, "1111");

      this.fistindex = index;
      this.firstId = f1.id;
      this.firstName = f1.name;
      //默认选中第一个
      this.secondaryId = f1.children.length && f1.children[0].id;
      //过滤出二级类别
      this.secondary = this.list
        .filter((item) => item.id == f1.id)[0]
        .children.slice(0, 8);
      this.getscontractListApifn(this.secondaryId);
    },
    //点击二级类别
    clickSecon(s) {
      console.log(s.id, "ssssss");
      this.secondaryId = s.id;
      this.secondaryName = s.name;
      //过滤出三级类别
      // this.threeList = this.secondary.filter(
      //   (item) => item.id == s.id
      // )[0].children;
      this.threeName = "";
      this.getscontractListApifn(s.id);
    },
    //点击三级类别
    clickThree(t, index) {
      this.threeId = t.id;
      this.threeName = t.name;
      this.currentIndex = t.id;
      // console.log(t, "ttt");
      // this.getscontractListinfofn(t.id);
      this.getscontractifPurchasefn(t,true);
      // this.$bus.$emit("father", this.demandShow);
    },
    //点击了购买接受子组件传的值
    tofather(e) {
      console.log('e',e);
      // 点击了购买应该要获取订单id
      this.getscontractifPurchasefn(e[1],false)
      // 打开收银台
      this.demandShow = e[0];
    },
    labelMore() {
      const _this = this;
      const list = _this.list;
      let showlist = _this.showlist;
      // 是否是收起
      if (!_this.flagMore) {
        _this.showlist = list.slice(0, 10);
        _this.flagMore = !_this.flagMore;
        return;
      }
      // 当前长度
      let length = showlist.length;
      // 最大的长度
      let maxlength = list.length;
      // list够6就加6
      if (length + 5 < maxlength) {
        _this.showlist = [...showlist, ...list.slice(length, length + 5)];

        // 不够到底，全部给，并且把更多改成收起
      } else {
        _this.flagMore = !_this.flagMore;
        _this.showlist = list;
      }
    },
    //二级类别顶级
    secedMore() {
      const _this = this;
      const list = _this.list[this.fistindex].children;
      let secondary = _this.secondary;
      // 是否是收起
      if (!_this.secendMore) {
        _this.secondary = list.slice(0, 8);
        _this.secendMore = !_this.secendMore;
        return;
      }
      // 当前长度
      let length = secondary.length;
      // 最大的长度
      let maxlength = list.length;
      // list够4就加4
      if (length + 4 < maxlength) {
        _this.secondary = [...secondary, ...list.slice(length, length + 4)];

        // 不够到底，全部给，并且把更多改成收起
      } else {
        _this.secendMore = !_this.secendMore;
        _this.secondary = list;
      }
    },
    successpay(e) {
      // console.log(e,"啊还是抠脚大汉看");
    },

    //获取第一个汉字
    getHanzi(name) {
      if (name) {
        let arr = name.split("");
        let reg =
          /^(\d+$|[a-z]+$|[A-Z]+$|[` ~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]+$|((?=[!-~])[^\da-zA-Z])+$)/;
        let str = "";
        for (let i = 0; i < arr.length; i++) {
          if (!reg.test(arr[i])) {
            return arr[i];
          }
        }
      }
    },
  },
};
</script>

<style scoped>
::v-deep .label-box-content,
::v-deep .label-box-content .el-row,
::v-deep .label-box-content .el-col,
::v-deep .label-box-content .el-col > div,
::v-deep .label-box-content .el-card,
::v-deep .label-box-content .el-card__body {
  height: 100%;
}
.wss-container >>> .el-card__body {
  position: relative;
  padding: 0 0 0 0;
}
.wss-container >>> .el-card__body > .top {
  margin: 0 30px;
}
.wss-container >>> .el-card__body > div {
  height: 92%;
  overflow-y: auto;
}
.el-card >>> .el-card__body > div::-webkit-scrollbar {
  width: 0;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 分享按钮 */
.contractTmp-Box >>> .top {
  position: relative;
}
.shareBtn {
  font-size: 16px;
  margin-left: 10px;
  color: #999;
  cursor: pointer;
}

/* 顶部右边搜索 */
.topRight {
  position: relative;
}
.topSearch {
  width: 220px;
}
::v-deep .topSearch .el-input__suffix {
  right: 15px;
}
.topSearch i {
  display: inline-block;
  font-size: 16px;
  margin-top: 7px;
}
::v-deep .topSearch .el-input__inner {
  height: 36px;
  line-height: 36px;
  border-radius: 18px;
}
::v-deep .topSearch .el-input__inner:focus {
  border: 2px solid #f87a23;
  border-radius: 18px 18px 0 0;
  border-bottom: 1px solid #efefef;
}
.topSearchFind {
  position: absolute;
  width: 100%;
  border: 2px solid #f87a23;
  border-top: 0;
  background-color: #fff;
  border-radius: 0 0 18px 18px;
  padding: 10px 0;
  z-index: 999;
  overflow: hidden;
}
.topSearchFind ul {
  max-height: 200px;
  overflow-y: auto;
}
.topSearchFind ul > li {
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
  font-size: 14px;
  line-height: 34px;
  font-weight: 400;
  color: #333333;
  cursor: pointer;
  transition: all 0.3s;
}
.topSearchFind ul > li:hover {
  background-color: #f4f5f8;
  color: #f87a23;
}
.topSearchFind ul > li > span {
  font-size: 12px;
  color: #999;
}
/* 顶部右边搜索 end*/

/* 一级 */
.tabOne {
  display: flex;
  justify-content: space-evenly;
  border: 1px solid #e5e6e9;
  background-color: #f9f9f9;
  border-radius: 12px;
  padding: 26px 0;
  margin: 15px 30px 10px 30px;
}
.tabOne .tablist {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.tabOne .tablist img {
  width: 36px;
}
.tabOne .tablist img.imgsel {
  display: none;
}
.tabOne .tablist.isActive img.imgsel {
  display: block;
}
.tabOne .tablist.isActive img.imgnor {
  display: none;
}

.tabOne .tablist button {
  color: #686975;
  font-size: 16px;
  font-weight: bold;
  background-color: transparent;
  border: 2px solid #c8cce2;
  padding: 6px 20px;
  margin-top: 18px;
}
.tabOne .tablist::before {
  content: "";
  display: none;
  position: absolute;
  bottom: -26px;
  width: 0;
  height: 0;
  border-bottom: 12px solid #e5e6e9;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}
.tabOne .tablist::after {
  content: "";
  display: none;
  position: absolute;
  bottom: -27px;
  width: 0;
  height: 0;
  border-bottom: 12px solid #fff;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}

.tabOne .tablist.isActive button,
.tabOne .tablist button:hover {
  color: #fff;
  background-color: #39486f;
  border-color: #39486f;
}
.tabOne .tablist.isActive::before {
  display: block;
}
.tabOne .tablist.isActive::after {
  display: block;
}

/* 一级类别 */
.tabTitle {
  font-size: 12px;
  color: #999;
  margin: 20px 30px;
}
.tabTwo ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 15px;
}
.tabTwo ul > li {
  width: 20%;
  margin-bottom: 20px;
  text-align: center;
  font-size: 14px;
  color: #333;
  border-bottom: 2px solid #fff;
  cursor: pointer;
  /* border: 1px solid #f87a23; */
}
.tabTwo ul > li > p {
  margin: 10px 0;
}
.tabTwo ul > li > img {
  display: block;
  width: 25px;
  margin: 0 auto;
}
.tabTwo ul > li.isSecon {
  color: #f87a23;
  /* font-weight: bold; */
  border-bottom-color: #f87a23;
}
.tabTwo ul > li:hover {
  /* color: #f87a23; */
  /* font-weight: bold; */
}
.label_more {
  display: block;
  background-color: transparent;
  border: 0;
  margin: 0 auto;
  color: #b9b9b9;
}
/* 三级别 */
.secend ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.secend ul > li {
  width: 24%;
  /* padding: 0 10px; */
  margin-bottom: 10px;
  margin-right: 5px;
  text-align: center;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  /* border: 1px solid #f87a23; */
  border-radius: 30px;
  background-color: #f6f5f8;
}
.secend ul > li > p {
  margin: 10px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.secend ul > li > img {
  display: block;
  width: 25px;
  margin: 0 auto;
}
.secend ul > li.isSecon {
  color: white;
  /* font-weight: bold; */
  background-color: #f87a23;
  /* border-bottom-color: #f87a23; */
}

.label_more {
  display: block;
  background-color: transparent;
  border: 0;
  margin: 0 auto;
  color: #b9b9b9;
}

.secondLevel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.secondLevel ul > li {
  position: relative;
  /* left: 0;
  top: 0; */
  padding: 5px 30px 18px 30px;
  border-bottom: 1px solid #efefef;
}
.secondLevel ul > li:hover {
  background-color: #f4f5f8;
}
.secondLevel ul > li > i {
  position: absolute;
  left: 20px;
  top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  width: 30px;
  height: 30px;
  background-color: #38476d;
  border-radius: 4px;
  color: #fff;
  font-style: normal;
}
.secondLevel ul > li:nth-child(even) > i {
  background-color: #b1bedf;
}
.secondLevel ul > li > h2 {
  font-size: 16px;
  /* font-weight: bold; */
  color: #333;
  margin: 0;
  padding-top: 15px;
  padding-bottom: 10px;
}
.secondLevel ul > li .coll_des {
  width: 100%;
  font-size: 13px;
  line-height: 20px;
  margin: 0;
  color: #666;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
.secondLevel ul > li .coll_source {
  margin: 0;
  margin-top: 6px;
  line-height: 18px;
  font-size: 12px;
  color: #bbb;
}

/* 三级类别的高亮 */
.tagActive {
  background-color: #f4f5f8;
}

/* 組件樣式衝突 */
>>> .featuredContent .el-card__body {
  padding: 0 30px;
}
>>> .featuredContent .el-card__body > .top {
  margin: 0;
}

@media (max-width: 1180px) {
  .tabTwo ul > li {
    margin-bottom: 15px;
  }
  .secend ul > li {
    width: 23%;
    font-size: 12px;
  }
  .secend ul > li:nth-child(4n) {
    margin-right: 0;
  }
}
</style>

<style lang="scss" scoped>
// gif表情
.slogan {
  padding-top: 20px;
  padding-bottom: 100px;
  text-align: center;

  .gif {
    // padding-top:50rpx;
  }
  .gif img {
    width: 150px;
    margin: 0 auto;
  }
  .text {
    // padding-top:50rpx;
    text-transform: uppercase;
    .cn {
      font-size: 40px;
      color: rgb(246, 246, 247);
    }
    .en {
      font-size: 14px;
      color: rgb(246, 246, 247);
    }
  }
  .text img {
    width: 551px;
    height: 116px;
    margin: 0 atuo;
  }
}
</style>
